<template>
	<view>
		<view view class="inv-h-w">
			<view class="inv-card" @click="inv_se = 1">
				<view :class="['title',inv_se==1?'selected-title':'']">
					<text v-if="inv_se==1">
						<text class="iconfont">&#xe7b2;</text>我创建的团队
					</text>
					<text class="iconfont" v-else>&#xe7b2;</text>
				</view>
			</view>
			<view class="inv-card" @click="inv_se = 2">
				<view :class="['title',inv_se==2?'selected-title':'']">
					<text v-if="inv_se==2">
						<text class="iconfont">&#xe60a;</text>我参加的团队
					</text>
					<text class="iconfont" v-else>&#xe60a;</text>
				</view>
			</view>
		</view>
		<view v-if="inv_se==1">
			<view class="no-content" v-if="teamInfo==null||teamInfo.length===0">
				<text>已将到底了</text>
			</view>
			<view v-for="(item, index) in teamInfo" :key="index">
				<uni-collapse ref="add" class="warp">
					<uni-collapse-item :show-animation="true" :title="item.name">
						<text class="content">
							<text class="iconfont" style="color:#c80bd9;">&#xe611;</text>团队编号：{{item.teamId}}
						</text>
						<text class="content">
							<text class="iconfont" style="color: #37ff91;">&#xe807;</text>团队介绍：{{item.con}}
						</text>
						<view class="content">
							<button type="primary" @click="showMember(item.teamId)">
								<text class="iconfont">&#xe6d1;</text>查看成员信息
							</button>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<view v-else>
			<view class="no-content" v-if="teamInfo2==null||teamInfo2.length===0">
				<text>已将到底了</text>
			</view>
			<view v-for="(item, index) in teamInfo2" :key="index">
				<uni-collapse ref="add" class="warp">
					<uni-collapse-item :show-animation="true" :title="item.name">
						<text class="content">
							<text class="iconfont" style="color:#c80bd9;">&#xe611;</text>团队编号：{{item.teamId}}
						</text>
						<text class="content">
							<text class="iconfont" style="color: #FFAA00;">&#xe62f;</text>团队发起人：{{item.tid}}
						</text>
						<text class="content">
							<text class="iconfont" style="color: #37ff91;">&#xe807;</text>团队介绍：{{item.con}}
						</text>
						<view class="content">
							<button type="primary" @click="showMember(item.teamId)">
								<text class="iconfont">&#xe6d1;</text>查看成员信息
							</button>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getTeamList,
		findTeamJoin,
		findPersonById
	} from '@/api/tTeam.js'
	import {
		uniCollapse,
		uniCollapseItem
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				inv_se: 2,
				teamInfo: [],
				teamInfo2: []
			}
		},
		methods: {
			getData() {
				uni.showLoading()
				// 创建的
				getTeamList({
					tid: getApp().globalData.tid
				}).then(res => {
					console.log(res)
					this.teamInfo = res.data.data
				})
				// 参加的 2
				findTeamJoin({
					tid: getApp().globalData.tid,
				}).then(res1 => {
					let target = res1.data.data.length
					for (let item of res1.data.data) {
						findPersonById({
							id: item.tid
						}).then(res2 => {
							item.tid = res2.data.data.name
							target--
							if (target == 0){
								uni.hideLoading()
								this.teamInfo2 = res1.data.data
							}
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showModal({
						content: '请求失败'
					})
				})
			},
			showMember(teamId) {
				uni.navigateTo({
					url: './teamMember?teamId=' + teamId
				})
			}
		},
		onLoad() {
			this.getData()
		},
	}
</script>

<style>
	page {
		font-family: 'Courier New', Courier, monospace;
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin-left: 5px;
	}

	.no-content {
		display: flex;
		height: auto;
		padding: 10px;
		font-size: 14px;
		justify-content: center;
		align-items: center;
		background-color: #f7f7f7;
	}

	.content {
		padding: 15px;
		font-size: 18px;
		line-height: 20px;
		background-color: #fbfbfb;
		color: #666;
		border-bottom: 1px dotted #c8c7cc;
		margin: 0 5px 10px 5px;
		box-shadow: 5px 5px 3px #d3cfb0;
		border-radius: 5px;
	}

	.fix_button {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 90rpx;
		background-color: #ffaa00;
		position: fixed;
		bottom: 50rpx;
		right: 50rpx;
		font-size: 100rpx;
		color: #FFFFFF;
		border-radius: 50%;
		box-shadow: 0px 0px 8rpx 8rpx #DDDDDD;
		z-index: 10;
	}

	.inv-h-w {
		height: 50px;
		background-color: #ffffff;
		border-bottom: 1px solid #F7F7F7;
	}

	.inv-card {
		height: 100%;
		line-height: 50px;
		display: inline-block;
		position: relative;
	}

	.inv-card .title {
		color: #FFFFFF;
		height: 50px;
		font-size: 18px;
		box-sizing: border-box;
		background-color: #ffaa00c2;
		padding-right: 40px;
		padding-left: 10px;
	}

	.inv-card .selected-title {
		background-color: #ffaa00;
	}

	.inv-card ::after {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		border-right: 50px solid white;
		border-left: 50px solid transparent;
		border-bottom: 50px solid transparent;
	}

	.no-content {
		display: flex;
		height: auto;
		padding: 10px;
		font-size: 14px;
		justify-content: center;
		align-items: center;
		background-color: #f7f7f7;
	}

	.content {
		padding: 15px;
		font-size: 18px;
		line-height: 20px;
		background-color: #fbfbfb;
		color: #666;
		border-bottom: 1px dotted #c8c7cc;
		margin: 0 5px 10px 5px;
		box-shadow: 5px 5px 3px #d3cfb0;
		border-radius: 5px;
	}
</style>
